<template>
  <div id="app">
    <button @click="$destroy()">销毁根组件</button>
    <button @click="isShow = !isShow">点击切换</button>
    <ComBro v-if="isShow"></ComBro>
    <ComSis></ComSis>
    <MyButton> 登录 </MyButton>
    <PageLayout>
      xxxxx hello world
      <!-- 给template添加 v-slot:坑名 属性指定到具体位置去添加内容 -->
      <template v-slot:header>
        <h1>
          <i class="iconfont icon-home-fill"></i>
        </h1>
      </template>
    </PageLayout>

    <MyCard>
      <template v-slot:header>
        <h1>这是一个头部</h1>
      </template>
      <div v-for="i in 5" :key="i">{{ i }}</div>
    </MyCard>
    <!-- 父组件为了接收子组件在slot上绑定的数据，必须在v-slot:名字后面加上等号赋值一个变量，这个变量是一个对象，可以拿到子组件中slot上面的所有的属性 -->
    <TableItem v-for="item in tableData" :key="item.id" :data="item" v-slot:default="scope">
      <button @click="del(scope.row.id)">{{scope.row.name}}</button>
    </TableItem>

    <ComRef></ComRef>
  </div>
</template>

<script>
import ComSis from './components/ComSis.vue'
import ComBro from './components/ComBro.vue'
import MyButton from './components/MyButton.vue'
import PageLayout from './components/PageLayout.vue'
import MyCard from './components/MyCard.vue'
import TableItem from './components/MyTable'
import ComRef from './components/ComRef.vue'
export default {
  name: 'App',
  data () {
    return {
      isShow: true,
      tableData: [
        {
          id: 1,
          name: 'jack',
          age: 18
        },
        {
          id: 2,
          name: 'rose',
          age: 18
        }
      ]
    }
  },
  methods: {
    handleClick () {
      alert(1)
    },
    del (id) {
      console.log(id)
    }
  },
  components: {
    ComSis,
    ComBro,
    MyButton,
    PageLayout,
    MyCard,
    TableItem,
    ComRef
  },
  beforeCreate () {
    console.log('父组件的-------------beforeCreate')
  },
  created () {
    // 一般在这里去发送请求
    console.log('父组件的-------------created')
  },
  beforeMount () {
    console.log('父组件的-------------beforeMount')
  },
  mounted () {
    // 如果需要操作dom，可以在mounted钩子中执行
    console.log('父组件的-------------mounted')
  },

  // 这一对数据更新会执行
  beforeUpdate () {
    console.log('父组件的-------------beforeUpdate')
  },
  updated () {
    console.log('父组件的-------------updated')
  },

  // 组件被销毁会触发
  beforeDestroy () {
    // 开发可以在清除定时器和事件绑定
    console.log('父组件的-------------beforeDestroy')
  },
  destroyed () {
    console.log('父组件的-------------destroyed')
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
